<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>
        角色权限
    </title>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../../../css/main.css" media="all">
    <script type="text/javascript" src="../../../../lib/loading/okLoading.js"></script>
    <link rel="stylesheet" href="../../../../css/bootstrap.css">
    <link rel="stylesheet" href="../../../../lib/layui/css/layui_2.5.7.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .layui-table-page select {
            height: 22px;
        }
        .i1 {
            width: 88%;
            margin: 3%;
        }
    </style>
</head>
<style>
    input {
        width: 280px !important;
    }
</style>
<body>

<div>
    <div class="x-nav">
        <span class="layui-breadcrumb">
            <a><cite>首页</cite></a>
            <a><cite>公司设置</cite></a>
            <a><cite>人员权限</cite></a>
        </span>
        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
           href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon"
                                                                            style="line-height:30px">ဂ</i></a>
    </div>
    <div class="fly-panel">
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label"><span style="color: red">*</span>角色名称:</label>
                <div class="layui-input-block">
                    <input  autocomplete="off"  readonly disabled type="text" name="name" autocomplete="off" placeholder="角色名称"
                           class="layui-input i1">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">网站菜单:</label>
                <div class="layui-input-block" id="menu">
                </div>
            </div>

            <button style="margin-left: 45%;margin-top: 2%" id="sub" class="layui-btn">保存
            </button>

        </form>
        <br><br><br><br><br><br><br><br><br><br>
    </div>
    <script type="text/javascript" src="../../../../js/jquery.min.js"></script>
    <script type="text/javascript" src="../../../../js/myAjax.js"></script>
    <script type="text/javascript" src="../../../../js/pub.js"></script>
    <script type="text/javascript" src="../../../../lib/layui/layui2.5.7.js"></script>
    <script type="text/javascript" src="../../../../js/vue.min.js"></script>
    <script type="text/javascript" src="../../../../js/xm-select.js"></script>
    <!-- <script src="lib/layui/layui.js" charset="utf-8"></script> -->
    <script src="../../../../js/x-layui.js" charset="utf-8"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script>
        layui.use(['laydate', 'element', 'laypage', 'layer', 'form'], function () {
            $ = layui.jquery;//jquery
            laydate = layui.laydate;//日期插件
            lement = layui.element;//面包导航
            laypage = layui.laypage;//分页
            layer = layui.layer;//弹出层
            var form = layui.form;
            okLoading.close($);
        });
    </script>
    <script>

        let recordId = getQueryVariable('recordId');
        let id = null;

        let menuIdArr = [];
        let namesArr = [];


        //选择菜单
        chooseMenu();


        $("#sub").click(function () {

            namesArr.forEach(name => {
                let ids = name.getValue('value');
                ids.forEach(id => {
                    if (menuIdArr.indexOf(id) === -1) {
                        menuIdArr.unshift(id);
                    }
                });
            });

            let request = {
                url: 'admin/editMenuWxmpSetting',
                method: 'POST',
                data: {
                    userId: $userId,
                    roleName: $("input[name=name]").val(),
                    menuPower: menuIdArr.join(","),
                    id: id
                }
            };

            sendRequest(request, (res) => {

                if (res.code === 0) {
                    layer.alert("修改成功！", {
                        icon: 6
                    }, function (index) {
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                        parent.reload();
                    });
                } else {
                    layer.msg(res.msg, {icon: 5});
                }

            });
            return false;
        });


        //根据id查看菜单结构
        function chooseMenu() {
            if (recordId) {
                let request = {
                    url: 'admin/findMenuWxmpChooseSetting',
                    method: 'POST',
                    data: {
                        userId: $userId,
                        id: recordId
                    }
                };

                sendRequest(request, (res) => {
                    $("input[name=name]").val(res.data.roleName);
                    id = res.data.id;
                    //加载显示菜单空结构
                    loadingMenu(res.data.menuPower);

                })
            } else {
                loadingMenu('');
            }


        }

        // async 98钱i9
        //加载显示菜单空结构
        function loadingMenu(menuPower) {
            let request = {
                url: 'admin/findMenuWxmpSetting',
                method: 'POST',
                data: {
                    userId: $userId
                }
            };

            sendRequest(request, (res) => {
                let data = res.data;
                //查询之后选中已有选项
                selectMenu(data, menuPower);

                for (let i = 0; i < data.length; i++) {

                    let div = $("<div class=\"xm-select-demo i1\"></div>").addClass("demo" + i);
                    $("#menu").append(div);

                    let name = 'demo' + i;

                    name = xmSelect.render({
                        el: '.' + [name],
                        autoRow: true,
                        filterable: true,
                        tips: data[i].name,
                        empty: '没数据哦～',
                        initValue: menuPower.split(','),
                        tree: {
                            show: true,
                            showFolderIcon: true,
                            showLine: true,
                            indent: 20,
                            expandedKeys: [data[i].value],
                            // simple: true
                        },
                        toolbar: {
                            show: true,
                            list: ['ALL', 'REVERSE', 'CLEAR']
                        },
                        height: 'auto',
                        data() {
                            return [
                                data[i],
                            ]
                        },
                        // on: function (data) {
                        //     //arr:  当前多选已选中的数据
                        //     let arr = data.arr;
                        //     console.log('arr---');
                        //     console.log(arr);
                        //     //change, 此次选择变化的数据,数组
                        //     let change = data.change;
                        //     //isAdd, 此次操作是新增还是删除
                        //     let isAdd = data.isAdd;
                        //     //可以return一个数组, 代表想选中的数据
                        //     //return []
                        //
                        //     if (!isAdd) {
                        //
                        //         change.forEach((item) => {
                        //             console.log(item);
                        //             let index = menuIdArr.indexOf(item.value);
                        //             menuIdArr.splice(index, 1);
                        //
                        //         });
                        //
                        //     } else {
                        //
                        //         arr.forEach((item) => {
                        //             if (menuIdArr.indexOf(item.value) === -1) {
                        //                 menuIdArr.unshift(item.value);
                        //             }
                        //             recursParent(item);
                        //         });
                        //     }
                        //
                        //     console.log(menuIdArr);
                        //
                        // },
                    });
                    namesArr[i] = name;
                }
            });
        }

        function selectMenu(list, menuPower) {
            let chooseIds = menuPower.split(",");
            list.forEach(item => {
                if (chooseIds.indexOf(item.value + "") !== -1) {
                    item.selected = true;
                }

                if (item.children) {
                    selectMenu(item.children, menuPower)
                }
            });

        }

        // function recursParent(item) {
        //
        //     if (item.__node !== undefined) {
        //         if (menuIdArr.indexOf(item.value) === -1) {
        //             menuIdArr.unshift(item.value);
        //         }
        //         if (item.__node.parent) {
        //             recursParent(item.__node.parent);
        //         }
        //     }
        // }
    </script>
</body>
</html>
